<template>
  <div class="contacts relative">
    <Head title="通讯录" @setting="showContact = true"></Head>
    <div class="flex flex-col gr-4">
      <section style="background-color: white">
        <div class="px-16">
          <List
            v-for="(item, key) in contactList"
            :key="key"
            :title="item.title"
            :icon="item.img"
            :show-arrow="false"
            :font-size="14"
            :image-size="32"
          />
        </div>
      </section>
      <section class="contact-list">
        <div v-for="(item, key) in list" :key="key">
          <div class="group pb-4">{{ item.group }}</div>
          <div class="px-16">
            <List
              v-for="(m, n) in item.list"
              :key="n"
              :icon="m.avatar"
              :title="m.name"
              :show-arrow="false"
              :font-size="14"
              :image-size="32"
              @click="selectItem(m)"
            >
            </List>
          </div>
        </div>
      </section>
      <!-- 字母的列表 -->
      <div class="letters">
        <ul class="flex flex-col text-center">
          <li>
            <span>↑</span>
          </li>
          <li>
            <span>☆</span>
          </li>
          <li v-for="item in letters" :key="item">
            <span>{{ item }}</span>
          </li>
          <li>
            <span>#</span>
          </li>
        </ul>
      </div>
    </div>

    <ContactFormVue></ContactFormVue>
    <Details></Details>
    <Settings></Settings>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted } from 'vue';
  import { getUserStore } from '@/store/user/utils';
  import { nanoid } from 'nanoid';
  import Head from '../components/head/Head.vue';
  import List from '../components/list/List.vue';
  import Settings from './settings/Settings.vue';
  import {
    IContact,
    IContactGroup,
    contactList,
    letters,
  } from './contacts/data';

  import Details from './details/Details.vue';
  import { currentContact, showDetials } from './details/details';
  import ContactFormVue from './contact-form/ContactForm.vue';
  import { showContact } from './contact-form/contact';
  import { messageAction } from '../components/message/message';
  import { messagePointer, showContactMessage } from './settings/settings';

  const store = getUserStore();
  const selectItem = (item: IContact) => {
    showDetials.value = true;
    currentContact.value = item;
  };
  onMounted(() => {
    messageAction.value.more = () => {
      showContactMessage.value = true;
    };
    /* 点击加号，让联系人主动发送消息 */
    messageAction.value.plus = () => {
      if (!currentContact.value) return;

      if (messagePointer.value < currentContact.value.fakeMessage.length - 1) {
        const { text: msg } =
          currentContact.value.fakeMessage[messagePointer.value + 1];
        currentContact.value.message.push({
          username: '',
          msg,
          avatar: currentContact.value.avatar,
          from: 'received',
          msgType: 'text',
          id: nanoid(),
          showTime: false,
          time: '',
        });
        messagePointer.value += 1;
      }
    };
  });
  function transformData(data: IContact[]): IContactGroup[] {
    const result: IContactGroup[] = [];

    data.forEach((friend) => {
      const existingGroup = result.find((item) => item.group === friend.group);
      if (existingGroup) {
        existingGroup.list.push({
          ...friend,
        });
      } else {
        result.push({
          group: friend.group,
          list: [{ ...friend }],
        });
      }
    });

    return result;
  }
  const list = computed(() => {
    return transformData(store.contacts);
  });
</script>

<style lang="scss" scoped>
  @import './contacts/styels.scss';
</style>
